<template>
  <!-- <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu> -->
  <template v-for="(item,index) in props.menuData">
    <el-menu-item v-if="!item.children || item.children.length ==0" 
      @click="handleClick(item,`${props.index}-${item.meta.id}`)"
      :index="`${props.index}-${item.meta.id}`"
      :key="`${props.index}-${item.meta.id}`">
      <!-- 父组件的index+孩子组件的id就可以确定唯一性 -->
      <!-- 如何解决递归中的index的唯一性呢  我们能想到的就算他父组件的id+和他本身的id拼接到一起-->
      <!-- 本次代码运用了递归的思想以后只要配置好路由就不用再写静态组件了 -->
      <template #title>
        <el-icon size="20">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.name }}</span>
      </template>
    </el-menu-item>

    <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
      <template #title>
        <el-icon size="20">
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.name }}</span>
      </template>
      <tree-menu :index="`${props.index}-${item.meta.id}`" :menuData="item.children" />
    </el-sub-menu>
  </template>

</template>

<script lang="ts" setup>

import { useRouter } from 'vue-router'
import {useStore} from '../../stores/counter'
const props = defineProps(['menuData', 'index'])
const counter = useStore();

//创建router实例
const router = useRouter()
//点击菜单
const handleClick = (item, active) => {
  counter.addMenu(item.meta);
  router.push(item.meta.path);
}
</script>
<style scoped></style>
